<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2019/12/23
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>找回密码</title>
    <link rel="alternate icon" type="image/png" href="${pageContext.request.contextPath}/amazeui/i/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/amazeui/css/amazeui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/md5.js"></script>
    <script>
        //md5加密
        $(function (){
            $("#change").click(function (){
                $("#pwd").val(hex_md5($("#password").val()));
                return true;
            });
        });

        function checkUsername(){
            //获取username值
            let username = $("#username").val();
            //定义正则规范用户输入
            let reg_username = /^\w{3,10}$/;
            //判断用户输入的值
            let flag = reg_username.test(username);
            if (flag){
                //格式正确
                $("#username").css("border","");
                $("#misUsername").text("");
            }else {
                //不正确
                $("#username").css("border","1px solid red");
                $("#misUsername").text("用户名为3到10个字符").css("color","red").css("font-size","5px");
            }
            return flag
        }

        function checkPwd(){
            //获取username值
            let password = $("#password").val();
            //定义正则规范用户输入
            let reg_password = /^\w{8,20}$/;
            //判断用户输入的值
            let flag = reg_password.test(password);
            if (flag){
                //格式正确
                $("#password").css("border","");
                $("#misPwd").text("");
            }else {
                //不正确
                $("#password").css("border","1px solid red");
                $("#misPwd").text("密码长度为8到20个字符").css("color","red").css("font-size","5px");
            }
            return flag
        }

        function checkEmail(){
            //1.获取邮箱
            let email = $("#email").val();
            //2.定义正则      itcast@163.com
            let reg_email = /^\w+@\w+\.\w+$/;

            //3.判断
            let flag = reg_email.test(email);
            if(flag){
                $("#email").css("border","");
            }else{
                $("#email").css("border","1px solid red");
            }
            return flag;
        }

        $(function (){
            $("#findPwdForm").submit(function (){
                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
                return checkUsername() && checkPwd() && checkEmail();
            });

            //失去焦点执行方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPwd);
            $("#email").blur(checkEmail);
        });
        $(function (){
            $(".close").click(function (){
                $(".alert").remove();
            });
        })
    </script>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>找回密码</h1>
    </div>
    <hr />
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <form method="post" id="findPwdForm" class="am-form" action="${pageContext.request.contextPath}/user/changePwd">
            <div class="login-form-div">
                <input type="text" name="username" id="username" value="" placeholder="请输入登录名" > <span id="misUsername"></span>
            </div>
            <div class="login-form-div">
                <input type="password" id="password" value="" placeholder="请重新设计密码"> <span id="misPwd"></span>
                <input type="hidden" name = "password" id="pwd">
            </div>
            <div class="login-form-div">
                <input type="email" name="email" id="email" value="" placeholder="请输入邮箱">
            </div>
            <div class="login-form-div alert alert-warning alert-dismissible" style="width: 280px;height: 45px;" role="alert">
                <button type="button" class="close">
                    <span>&times;</span>
                </button>
                <strong id="msg">${REMOVE_PWD}</strong>
            </div>
            <div class="am-cf login-form-div">
                <input type="submit" name="" id="change" value="修改" class="am-btn am-btn-primary am-btn-lg  am-btn-block am-fl">
            </div>
        </form>
        <hr>
        <p class="am-text-center">&copy; 2021 Designed by yxq   <a href="mailTo:liyan@itany.com">liyan@itany.com</a> </p>
    </div>
</div>
</body>
</html>
